<template>
    <view class="hot_rec">
        <view v-if="hotRecommend.length !== 0" class="moduledata_title">
            <image class="title_bg" src="../../../static/img/common/title_bg.png"></image>
            热门推荐
        </view>
        <block v-for="item in hotRecommend" :key="item.productId">
            <view class="module_title">
                <Goods :item="item">
                </Goods>
            </view>
        </block>
        <!-- <view @tap="toLookmore()" class="look_more">查看更多</view> -->
        <view @tap="toLookmore()" class="look_more">
            <!-- <image mode="widthFix" class="look_more_img" src="../../../static/img/common/lookmore.png" /> -->
            <view class="look_more_img">查看更多</view>
        </view>
    </view>
</template>

<script>
import Big from 'big.js';
import {
    home
} from '../../../services/index.js';
import Goods from '../goods/index.vue';
export default {
    data() {
        return {
            hotRecommend: [],
        }
    },
    components: {
        Goods,
    },
    mounted() {
        this.homeModule();
    },
    methods: {
        async homeModule() {
            let res = await home.productHotRecommend();
            if (res.code === 200) {
                res.data.forEach((e) => {
                    e.originalPrice = new Big(e.originalPrice).div(100);
                    e.currentPrice = new Big(e.currentPrice).div(100);
                })
                this.hotRecommend = res.data.slice(0, 10);
            }
        },
        toLookmore() {
            uni.navigateTo({
                url: '/pages/allRecommend/index',
            })
        }
    }
}
</script>

<style scoped>
.hot_rec {
    /* background-color: #fff; */
}

.moduledata_title {
    /* background-color: #fff; */
    text-align: center;
    padding: 20rpx 0 40rpx;
    position: relative;
    height: 50rpx;
    font-size: 48rpx;
    margin-bottom: 20rpx;
}

.title_bg {
    width: 315rpx;
    height: 48rpx;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 8rpx;
}

.look_more {
    text-align: center;
    padding: 15rpx 0;
    font-size: 28rpx;
    color: #333333;
    display: flex;
    justify-content: center;
    /* background-color: #fff; */
}

.look_more_img {
    /* width: 239rpx; */
    padding: 12rpx 50rpx;
    background-color: #0F4C97;
    color: white;
    border-radius: 50rpx;
}

.module_title {
    box-shadow: 0rpx 9rpx 30rpx 0rpx rgba(6, 4, 3, 0.19);
    border-radius: 20rpx;
    margin-bottom: 4%;
    background-color: #fff;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 15rpx;
}
</style>
